<template>
	<div class="cell" :class="cellClass" @click="handleClick">
		<Player v-if="cellType === CELL_TYPES.PLAYER" />
		<Box v-else-if="cellType === CELL_TYPES.BOX" :on-target="false" />
		<Box v-else-if="cellType === CELL_TYPES.BOX_ON_TARGET" :target="true" />
		<Target v-else-if="cellType === CELL_TYPES.TARGET" />
		<Wall v-else-if="cellType === CELL_TYPES.WALL" />
	</div>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		CELL_TYPES
	} from '@/js/game.js';
	import Player from './player.vue';
	import Box from './box.vue';
	import Target from './Target.vue';
	import Wall from './Wall.vue';

	const props = defineProps({
		cellType: {
			type: Number,
			required: true
		},
		position: {
			type: Object,
			required: true
		}
	});

	const emit = defineEmits(['click']);

	const cellClass = computed(() => {
		switch (props.cellType) {
			case CELL_TYPES.WALL:
				return 'wall';
			case CELL_TYPES.TARGET:
				return 'target';
			case CELL_TYPES.EMPTY:
				return 'empty';
			default:
				return '';
		}
	});

	const handleClick = () => {
		emit('click', props.position);
	};
</script>

<style scoped>
	.cell {
		width: 10vh;
		box-sizing: border-box;
		position: relative;
	}
</style>
